s <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!-- - #笔记要求

##笔记
- 每日边看视频边记录笔记，然后每个知识点需要自己解释一下
- 以及 每日未解决的问题可以记录下来
- 记录每日完成多少代码量（多少行）
- 今天做了什么
有做项目的话，项目的进度 -->
Flex布局：
Flex是Flexible Box的编写 意为“弹性布局”用于盒状模型提高最大的灵活性任何一个容器都可以指定为Flex布局
容器默认存在两根轴：水平的主轴（main axis）,重叠的交叉轴（cross axis）
主轴开始位置（与边框交叉点）叫 main start,结束位置叫main end
交叉轴开始位置（cross start）,结束位置（cross end）
项目默认沿主轴排列
容器的属性：
flex-direction属性决定主轴的方向
flex-direction：row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
colum-reverse:主轴为垂直方向，起点在下沿
flex-wrap属性：默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下
他可能去三个值：（1）mowrap(默认)不换行
                （2）wrap:换行，第一行在上方
                （3）wrap-reverse:换行，第一行在下方
align-items属性：定义项目在交叉轴上如何对齐
可能取的5个值：flex-starl：交叉轴的起点对齐
               flex-end：交叉轴的终点对齐
               center：交叉轴的中点对齐
               baselnie：项目的第一行文字的基线对齐
               stretch(默认值）：如果项目未设置高度或设为auto,将占满整个容器的高度
align-content属性定义了很多根轴线的对齐方式 如该项目只有一根轴线，该属性不起作用